<template>
	<div class="zk-wiki">
		<el-container v-loading="loading">
			<el-header class="zk-wiki_head">
				<div class="head-contion">
					<ul class="head-contion_ul">
						<li>
							<el-autocomplete size="small" popper-class="my-autocomplete" v-model="keyword"
								:fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
								<i class="el-input__icon el-icon-search" slot="prefix"></i>
								<template slot-scope="{ item }">
									<div class="title">{{ item.name }}</div>
									<span class="concent">{{ item.content }}</span>
								</template>
							</el-autocomplete>
						</li>
						<li class="head-contion_li" :class="{ 'contion_li-active': headIndex == index }"
							v-for="(item, index) in headJson" :key="index" @click="tabClick(item)">{{ item.name }}</li>
					</ul>
				</div>
				<div class="head-logo">
					<div class="project_title" v-if="viewModel">{{ viewModel.project.name }}</div>
					<img src="https://diyapi.5ug.com/wwwroot/uploads/api/935-660-657/2023-06-15/648ac45b8a090941e4c3bb2c.jpg"
						class="logo" />
				</div>

			</el-header>
			<el-container class="wiki-contion" style="background:#F2F2F2; box-sizing:border-sizing;">
				<el-aside width="310px" style="background: #fff;" class="el-aside-wiki">
					<!-- <tree ref="leftMenu" :projectId="viewModel.project.id" :list="viewModel.wikis" @viewWiki="viewWiki" v-if="flase"></tree> -->
					<left @change="tabClick" :defaultWiki="defaultWiki" :editModel="false" @editWiki="viewWiki"
						ref="leftMenu" :viewModel="viewModel" v-if="viewModel"></left>
				</el-aside>
				<el-container ref="elContainer">
					<right ref="editArea" :project="viewModel.project" v-if="viewModel"></right>
					<view-intro @viewWiki="viewWiki" ref="viewArea" :project="viewModel.project"
						v-if="viewModel"></view-intro>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import left from '@/admins/cloud/admin-wiki-edit/styles/left'
import right from './widget/right'
import viewIntro from './widget/view'
import ala from 'ala'
export default {
	components: {
		left,
		right,
		viewIntro
	},
	data() {
		return {
			headJson: [
				{
					name: '编辑',
					url: '/admin/wiki/edit?id='
				}
			],
			headIndex: 3,
			defaultWiki: {},
			viewModel: null,
			loading: true,
			searchList: [],
			keyword: ''
		}
	},
	mounted() {
		this.init()
	},
	methods: {
		async init() {
			this.loading = true
			this.viewModel = await this.$admin.wikiTree(false)
			var wikiId = this.$ala.urlQuery('wikiId')
			var wiki = this.$ala.arrayDeepFind(this.viewModel.wikis, wikiId)
			if (!wiki) {
				wiki = this.viewModel.wikis[0]
			}
			this.defaultWiki = wiki
			this.viewWiki(wiki)
			this.loading = false
		},
		// 删除添加，编辑是发生改变
		change(array) {
			// this.viewModel.wikis = array
			//  this.$forceUpdate()
		},
		search(keyword, data) {
			keyword = keyword.toLowerCase()
			var array = []

			function find(arr, keyword) {
				arr.forEach(item => {
					if (item.children && item.children.length > 0) {
						find(item.children, keyword)
					}
					if ((item.name && item.name.toLowerCase().indexOf(keyword) > -1) || (item.content && item.content.toLowerCase().indexOf(keyword) > -1)) {
						array.push(item)
					}
				})
			}
			find(data, keyword)
			return array
		},
		querySearch(queryString, cb) {
			this.searchList = this.viewModel.wikis
			var searchList = this.searchList
			var results = queryString ? this.search(queryString, this.viewModel.wikis) : searchList
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		handleSelect(item) {
			this.viewWiki(item)
		},
		tabClick(item) {
			this.$router.push(`${item.url}${this.viewModel.project.id}`)
		},
		viewWiki(wiki) {
			this.$nextTick(() => {
				this.$router.push(`/web/wiki?id=${this.viewModel.project.id}&wikiId=${wiki.id}`)
				if (wiki.id === 'index') {
					this.$refs.viewArea.init(this.viewModel)
					this.$refs.editArea.init(null)
				} else {
					this.$refs.viewArea.init(null)
					this.$refs.editArea.init(wiki)
				}
			})
		},
		async wathcRoute() {
			var prodjctId = ala.urlId()
			if (this.viewModel.project.id !== prodjctId) {
				await this.init()
			}
		}
	},
	watch: {
		$route: 'wathcRoute'
	}
}
</script>
<style lang="scss">
@import "./var.scss";
</style>